@namespace FluentCMS.Web.Plugins.Block
@inherits BasePlugin

<Modal Size="ModalSize.Large" Visible="Open" OnClose="HandleClose">
    <CloseButton class="f-block-modal-close-button" @onclick="HandleClose" />
    <div class="f-block-modal-body">
        <div class="f-block-modal-sidebar">
            <div class="f-block-modal-sidebar-title">Choose Block</div>
            <div class="f-block-modal-sidebar-item @(CurrentCategory == string.Empty ? "f-block-modal-sidebar-item-active" : "")"
                 @onclick="() => ChooseCategory(string.Empty)">
                All
            </div>

            @foreach (var category in Categories)
            {
                <div class="f-block-modal-sidebar-item @(CurrentCategory == category ? "f-block-modal-sidebar-item-active" : "")"
                     @onclick="() => ChooseCategory(category)">
                    @category
                </div>
            }
        </div>
        <div class="f-block-modal-previews">
            <div class="f-block-modal-preview">
                @foreach (var block in FilteredBlocks.Where((value, index) => index % 2 == 0))
                {
                    <BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
                }
            </div>
            <div class="f-block-modal-preview">
                @foreach (var block in FilteredBlocks.Where((value, index) => index % 2 != 0))
                {
                    <BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
                }
            </div>
        </div>
    </div>
</Modal>
